<script setup lang="ts">
import { useRouter } from 'vue-router';
import FloatBar from './components/FloatBar.vue';
const router = useRouter();

router.afterEach(() => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
});

const getTransitionName = (to: any, from: any) => {
  if (!from) return 'slide-right';
  const toIndex = to.meta.index;
  const fromIndex = from.meta.index;
  return toIndex > fromIndex ? 'slide-left' : 'slide-right';
};

const closeNavbar = () => {
  const navbar = document.getElementById('navbarNav');
  if (navbar) {
    navbar.classList.remove('show');
    // 触发resize事件确保布局更新
    window.dispatchEvent(new Event('resize'));
  }
};
</script>

<template>
  <div class="app">
    <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
      <div class="container">
        <a class="navbar-brand" href="/">
          <img src="https://img1.hijs.cc/xubai/images/logo.png" alt="Logo" class="logo">
          <span class="company-name">旭佰塑业</span>
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item">
              <router-link class="nav-link" to="/" @click="closeNavbar()">首页</router-link>
            </li>
            <li class="nav-item">
              <router-link class="nav-link" to="/products" @click="closeNavbar()">产品中心</router-link>
            </li>
            <li class="nav-item">
              <router-link class="nav-link" to="/about" @click="closeNavbar()">关于我们</router-link>
            </li>
            <li class="nav-item">
              <router-link class="nav-link" to="/history" @click="closeNavbar()">发展历程</router-link>
            </li>
            <li class="nav-item">
              <router-link class="nav-link" to="/contact" @click="closeNavbar()">联系我们</router-link>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <router-view v-slot="{ Component, route }">
      <transition :name="getTransitionName(route, $route)">
        <component :is="Component" />
      </transition>
    </router-view>

    <FloatBar />
  </div>
</template>

<style>
@import '../styles/main.css';

.app {
  max-width: 1920px;
  margin: 0 auto;
}

.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 0.3s ease;
  position: absolute;
  width: 100%;
}

.slide-left-enter-from {
  transform: translateX(100%);
  opacity: 0;
}

.slide-left-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}

.slide-right-enter-from {
  transform: translateX(-100%);
  opacity: 0;
}

.slide-right-leave-to {
  transform: translateX(100%);
  opacity: 0;
}

@media (max-width: 768px) {
  .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    z-index: 1000;
    padding: 1rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
}
</style>
